<template>
  <div class="big_parent">
    <!-- <div class="city_change" @click="cityChange">
      {{city}}
      <i></i>
    </div> -->
    <div class="head_swiper_leftTop">

    </div>
    <div class="head_swiper">
      <!-- <swiper v-model="imgModel"
              @on-index-change="onIndexChange"
              height="30vh">
        <swiper-item class="swiper-demo-img"
                     @click.native="clickswiper(index)"
                     v-for="(item, index) in imglist"
                     :key="index">
          <img :src="item.src">
        </swiper-item>
      </swiper>-->
      <swiper :list="imglist" v-model="imgModel" height="30vh" @click.native="clickswiper(imgModel)" @on-index-change="onIndexChange"></swiper>
    </div>
    <div class="main_content">
      <div class="head_new_data">
        <div class="new_data_title">
          <div class="yy-title">国家卫健委最新发布数据</div>
           <div class="update_div">
              <span class="">{{updateDateStr}}</span>
            </div>
            <span class="data_declare" @click="openAlert"><img src="../../assets/images/icon/icon_qs.png">数据说明</span>
        </div>
        <div class="yy-container">
          <div class="div-Num">
              <div class="yy-anum">{{newsObj.confirm}}</div>
              <div class="yy-pic-a"></div>
              <div class="yy-type">确诊病例</div>
              <div style="width: 14vw; height: 0.6vh; background: #f05551; margin-left: 4vw; margin-top: 1vw; border-radius: 0.8vh;"></div>
            </div>
            <div class="div-Num">
               <div class="yy-bnum">{{newsObj.probable}}</div>
               <div class="yy-pic-b"></div>
               <div class="yy-type">疑似病例</div>
               <div style="width: 14vw; height: 0.6vh; background: #ffa02c; margin-left: 4vw; margin-top: 1vw; border-radius: 0.8vh;"></div>
            </div>
            <div class="div-Num">
              <div class="yy-cnum">{{newsObj.cure}}</div>
              <div class="yy-pic-c"></div>
              <div class="yy-type">治愈人数</div>
              <div style="width: 14vw; height: 0.6vh; background: #308c5b; margin-left: 4vw; margin-top: 1vw; border-radius: 0.8vh;"></div>
            </div>
          <div class="div-Num">
            <div class="yy-dnum">{{newsObj.dead}}</div>
            <div class="yy-pic-d"></div>
            <div class="yy-type">死亡人数</div>
            <div style="width: 14vw; height: 0.6vh; background: #616065; margin-left: 4vw; margin-top: 1vw; border-radius: 0.8vh;"></div>
          </div>
        </div>
      </div>
      <div class="same_take" >
        <div @click="comeSameTake" class="yy-t-c">
          <span><img class='yy-t-c-image' src='../../assets/images/home/trans.png' /></span>
          同乘查询
        </div>
        <div @click.stop="gotoeforecast" class="yy-t-c">
          <span><img class='yy-t-c-image' src='../../assets/images/home/table.png' /></span>
          疫情预测
        </div>
        <div class="yy-t-c yy-city-select" @click="cityChange">
          {{city}}
          <i></i>
        </div>
      </div>
      <div class="tab_content" ref="tabcontent">
        <tab v-model="tabModel" custom-bar-width="30px" active-color="#265eff" :line-width="2" bar-active-color="#265eff" default-color="#333333" >
          <tab-item selected
                    @on-item-click="onItemClick('#epidemicDynamicsList')">最新动态</tab-item>
          <tab-item @on-item-click="onItemClick('#convergence')">网络信息汇聚</tab-item>
        </tab>
      </div>
      <!-- <div class="tab_scrollor"  ref="tabScrollor"> -->
      <div ref="tabScrollor">
        <!-- <p class="content_title"
           id="epidemicDynamicsList"></p> -->
           <div id="epidemicDynamicsList"></div>
        <epidemicDynamicsList ref="edpage" :city="city"  @loadLocal="loadLocal" />
        <!-- <p class="content_title" id="convergence"></p> -->
            <div id="convergence" ref="convergence"></div>
        <convergence />
      </div>
      <div class="buttom_bar">
        <span @click="openLink(0)">新型冠状病毒</span>
        <!-- <span @click="openLink(1)">流行病学调查</span> -->
      </div>
    </div>

    <!-- 图片放大组件 -->
    <previewer :list="imglist1"
               ref="previewer"
               :options="options"
               @on-index-change="logIndexChange"></previewer>
    <!-- dialog组件 -->
    <mu-dialog title=""
               width="600"
               max-width="80%"
               :esc-press-close="false"
               :overlay-close="false"
               :open.sync="openAlertM">
      最新数据来自国家卫健委最新发布数据 更新时间为网站的发布时间
      <mu-button slot="actions"
                 flat
                 color="primary"
                 @click="openAlertM=false">关闭</mu-button>
    </mu-dialog>
    <mu-dialog title="" width="360" scrollable  :open.sync="openSimple">
          <el-button type="text" size="mini" @click="() => clearTree()">全国</el-button>
          <el-tree :data="cityList" :props="defaultProps" @node-click="handleNodeClick" :expand-on-click-node="false">
          </el-tree>
    </mu-dialog>
  </div>

</template>

<script>
import { Divider, Group, Spinner, Tab, TabItem, Search, Swiper, SwiperItem, Previewer } from 'vux'
import convergence from './convergence.vue'
import epidemicDynamicsList from './epidemicDynamicsList.vue'
import { queryNum,swiperAjaxData } from '@/assets/js/service'
export default {
  components: {
    Divider,
    Group,
    Spinner,
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Previewer,
    convergence,
    epidemicDynamicsList
  },
  data () {
    return {
      imgModel: 0,
      tabModel:0,
      showinfo: false,
      newsObj: {},
      openSimple:false,
      updateDateStr:"",
      openAlertM: false,
      changeNumFlag:0,
      cityList:[],
      city:"全国",
      selectCity:{},
      defaultProps: {
          children: 'children',
          label: 'name'
      },
      fallbackImg: require("../../assets/images/gsafety.png"),//图片展示不出来默认显示辰安图片
      imglist: [{
        url: 'javascript:',
        src: require("../../assets/images/gsafety.png"),
        msrc: require("../../assets/images/gsafety.png"),
        title: '',
      }
      ],
      imglist1:[],
      options: {
        getThumbBoundsFn (index) {
          // find thumbnail element
          let thumbnail = document.querySelectorAll('.vux-img')[index]
          // get window scroll Y
          let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
          // optionally get horizontal scroll
          // get position of element relative to viewport
          let rect = thumbnail.getBoundingClientRect()
          // w = width
          return { x: rect.left, y: rect.top + pageYScroll, w: rect.width }
          // Good guide on how to get element coordinates:
          // http://javascript.info/tutorial/coordinates
        }
      }
    }
  },
  created () {
    var _this = this;
    _this.initData()
  },
  mounted: function () {
    let _this=this;
    window.goBack = this.goBack;//返回
    this.$refs.tabScrollor.addEventListener('scroll', () => {
      var current_offset_top = _this.$refs.tabScrollor.scrollTop;
      if(_this.changeNumFlag>0&&current_offset_top>=_this.changeNumFlag){
        _this.tabModel=1;
      }else{
         _this.tabModel=0;
      }

    })

  },
  methods: {
    loadLocal(){
      let _this=this;
      //数据加载成功给200毫秒渲染时间
      setTimeout(()=>{
         let convergencenum=_this.$refs.convergence;
        convergencenum=_this.$refs.convergence.offsetTop;//找到滚动条网络信息汇聚div的位置
        //console.log("sure==>"+_this.changeNumFlag)
        let tabcontent=_this.$refs.tabcontent.offsetTop;//找到滚动模块的位置
        _this.changeNumFlag=convergencenum-tabcontent-45;
        console.log("sure==>"+_this.changeNumFlag)
      },200)

    },
    handleNodeClick(data){
      console.log("click")
      this.openSimple = false;
      this.selectCity=data;
      this.city=data.name;

      if(this.city&&this.city.substring(this.city.length-1)=='省'||this.city.substring(this.city.length-1)=='市'){
        this.city=this.city.substring(0,this.city.length-1)
      }
      this.requestNum();
      this.$refs.edpage.requestList(this.city);
    },
    clearTree(){
      this.city="全国";
      this.requestNum();
      this.$refs.edpage.requestList("");
      this.openSimple=false;
    },
    cityChange(){
      console.log("click change city")
      this.openSimple=true;
    },
    gotosurvey () {
      this.$router.push('/survey');
    },
    comeSameTake(){
      this.$router.push({path:"/other",query: {type:1}});
    },
    gotoeforecast(){
      this.$router.push({path:"/eforecast"});
    },
    onIndexChange () {
      console.log(this.imgModel)
    },
    openAlert () {
      this.openAlertM = true;
    },
    clickswiper (_index) {
      console.log(_index)
      this.$refs.previewer.show(_index)
    },
    logIndexChange () {

    },
    openLink(_index){
      if(_index==0){
        //丁香医生
        this.$router.push({path:"/other",query: {}});
      }else{
        //流调
        this.gotosurvey();
      }
    },
    onItemClick (_id) {
      this.$el.querySelector(_id).scrollIntoView();
    },
    requestNum(){
      let _this=this;
      let paramCity="";
      if(_this.city=="全国"){
        paramCity="";
      }else{
        paramCity=_this.city
      }
      var param={"area":decodeURI(paramCity)};
      queryNum(param,function(res){
        console.log("返回正常queryNum",res)
        if(res){
           _this.newsObj=res;
           _this.updateDateStr=res.update_time.split("：")[1]
        }else{
          _this.$showBottomToast("请求数据异常！")
        }
      })
    },
    initData () {
      let _this = this;
      _this.requestNum();


      swiperAjaxData({},function(res){
        console.log("返回正常queryNum",res)
        if(res){
          console.log(res)
          let resimgList = res.data;
          resimgList.unshift({
            src:"http://118.190.86.214:8080/macau_public/yq/1.png",
            desc:'辰安人在行动'
          })
          if (typeof (resimgList) != 'undefined' && typeof (resimgList) != 'null' && resimgList.length > 0) {
            _this.imglist = [];
            // let obj = { url: 'javascript:', src: _this.fallbackImg, msrc: _this.fallbackImg, title: "", fallbackImg: _this.fallbackImg }
            // _this.imglist.push(obj);
            // 本地
            resimgList.forEach((_item, _index) => {
              let url = _item.src;
              let obj = { url: 'javascript:', src: url, msrc: url,img:url, title: _item.desc, fallbackImg: url}
              console.log(obj);
              _this.imglist.push(obj);
              _this.imglist1.push(obj);
            })
          }
        }else{
          _this.$showBottomToast("请求数据异常！")
        }
      })
      let cityarr=require("../../assets/json/city.json")
      this.cityList=cityarr;
      // let resimg = require("../../assets/json/homeImgList.json")

    }
  }
}
</script>
<style lang="less" scoped>
.yy-container{
  background: rgb(245, 245, 245);
  width: 100vw;
  height: 14vh;
  display: flex;
  border-radius: 5px;
  // justify-content: center;
  // margin-bottom: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  .div-Num{
    width: 22vw;
    // flex: 1;
    // height: 100vh;
    text-align: center;
    .yy-anum{
      height: 4vh;
      line-height: 4vh;
      color: #f05551;
      font-weight: 550;
    }
    .yy-bnum{
      height: 4vh;
      line-height: 4vh;
      color: #ffa02c;
      font-weight: 550;
    }
    .yy-cnum{
      height: 4vh;
      line-height: 4vh;
      color: #308c5b;
      font-weight: 550;
    }
    .yy-dnum{
      height: 4vh;
      line-height: 4vh;
      color: #616065;
      font-weight: 550;
    }
    .yy-pic-a{
      width: 5vw;
      height: 3vh;
      background:url(../../assets/images/home/a.png);
      background-size: 100% 100% ;
      margin-left: 8vw;
    }
    .yy-pic-b{
      width: 5vw;
      height: 3vh;
      background:url(../../assets/images/home/b.png);
      background-size: 100% 100% ;
      margin-left: 8vw;
    }
    .yy-pic-c{
      width: 5vw;
      height: 3vh;
      background:url(../../assets/images/home/c.png);
      background-size: 100% 100% ;
      margin-left: 8vw;
    }
    .yy-pic-d{
      width: 5vw;
      height: 3vh;
      background:url(../../assets/images/home/d.png);
      background-size: 100% 100% ;
      margin-left: 8vw;
    }
    .yy-type{
      font-size: 13px;
      margin-top: 5px;
    }
  }
}
.big_parent .vux-tab{
  background-color: #ffffff !important;
}
.city_change{
  height: 28px;
  padding: 0 10px;
  opacity: .76;
  line-height: 30px;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000;
  font-weight: 700;
  background: #e5feff;
  border-radius: 51px;
  text-align: center;
  font-size: 14px;
  color: #104345;
  i{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-image: url('../../assets//images/icon/select.png');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 5px;
  }
}
.head_swiper_leftTop{
  background: url("../../assets/images/home/logo.png") 0 0;
  background-size: 100% 100%;
  width: 140px;
  height: 25px;
  position: absolute;
  z-index: 9;
  top: 15px;
  left: 10px;
}
.head_swiper {
  width: 100%;
  height: 30%;
  img {
    width: 100%;
    height: 100%;
  }
}
.main_content {
  width: 100%;
  height: calc( 100% - 30% );
  background-size: 100% auto;
  background-repeat: repeat-y;
//   background: url("../../assets/images/home/content_bg.png") center/contain;
}

// .content_title {
//   margin-top: 30px;
//   color: white;
// }
.head_new_data {
  width: 90%;
  height: 32%;
  margin-left: 5%;
  font-size: 17px;
  overflow: hidden;
  p {
    font-weight: bold;
    height: 5vh;
    line-height: 5vh;
  }
  .yy-title{
    width: 55%;
    color: #333333;
    height: 42px;
    line-height: 42px;
    font-size: 16px;
    font-weight: 500;
    // background: #00e50b;
  }
  .new_data_title{
    width: 100%;
    height: 8vh;
    // background: url("../../assets/images/icon/biaoti.png");
    background-position-x: -8px;
    background-size: 90vw 8vh;
    position: relative;
    .update_div{
          width: 51.5%;
          height: 8vh;
          color: #aeaeae;
          font-size: 12px;
          // -webkit-transform-origin-x: 0;
	        -webkit-transform: scale(0.8);
          position: absolute;
          top: 10px;
          left: 52%;
          // line-height: 8vh;
          span{
            display: block;
            text-align: right;
          }
    }
    .data_declare {
      // width: 20%;
      font-size: 12px;
      color: #aeaeae;
      position: absolute;
      right: 0;
      display: block;
      top: 4vh;
      // -webkit-transform-origin-x: 0;
	    -webkit-transform: scale(0.8);
      img{
        width: 12px;
        height: 12px;
        vertical-align: middle;
        margin-right: 5px;
      }
    }
  }
  .timeNum {
    font-size: 14px;
    color: darkgray;
    line-height: 5vh;
    height: 5vh;

    img {
      width: 16px;
      margin: 1px 2px;
      vertical-align: middle;
    }

  }
  ul {
    width: 100%;
    margin-top: -2%;
    height: calc( 100% - 8vh );
    li {
      width: 25%;
      height: 100%;
      text-align: center;
      float: left;
      position: relative;
      img{
        width: 27vw;
        height: 100%;
        margin-left: -2vw;
      }
      div{
        // width: 27vw;
        // height: 100%;
        // margin-left: -4vw;
        // display: inline-block;
        // overflow: hidden;

      }
      span{
        position: absolute;
        top: 64%;
        width: 100%;
        display: inherit;
        left: -.5vw;
      }
      .date_title {
        font-size: 15px;
      }
      .div_cNum{
        // span{
        //   display: block;
        //   color: #d56c0f;
        //   font-weight: bold;
        // }
        .yy-num{
          color: #d56c0f;
          text-align: center;
        }
        .yy-pic-a{
          width: 5vw;
          height: 3vh;
          background:red;
        }
      }
      .div_sNum{
        // background:url("../../assets/images/icon/02.png");
        // background-size: 106% 100%;
        // span{
        //   color: #20fcff;
        //   font-weight: bold;
        // }
      }
      .div_cuNum{
        // background:url("../../assets/images/icon/03.png");
        // background-size: 106% 100%;
        // span{
        //   color: #00e50b;
        //   font-weight: bold;
        // }
      }
      .div_dNum{
        // background:url("../../assets/images/icon/04.png");
        // background-size: 106% 100%;
        // span{
        //   color: #ff0202;
        //   font-weight: bold;
        // }
      }
    }
  }
}
.same_take{
  width: 100%;
  height: 11%;
  // margin-top: -3%;
  // background: url("../../assets/images/icon/321.png");
  background-size: 100%;
  display: flex;
  justify-content: center;
  .yy-t-c{
    margin-top: 1.5vh;
    margin-left: 1.5vh;
    width: 15vh;
    height: 5vh;
    border-radius: 3px;
    background-color: rgb(243, 248, 253);
    box-shadow: 0 2px 0 rgb(0, 64, 255);
    text-align: center;
    // color: #fff;
    line-height: 5vh;
    font-size: 14px;
    font-weight: 600;
    .yy-t-c-image {
      width: 12px;
      height: 18px;
      padding-top: 7px;
    }
  }
  .yy-city-select{
    color: #000;
    background: #fbfbfb;
    border: 1px solid #bfbfbf;
    box-shadow: 0 0 0 rgb(0, 64, 255);
    text-align: left;
    margin-right: 2vw;
    padding-left: 10px;
    padding-bottom: 15px;
    i{
      display: inline-block;
      width: 10px;
      height: 10px;
      background-image: url('../../assets//images/icon/select.png');
      background-size: contain;
      background-repeat: no-repeat;
      margin-left: 25px;
    }
  }
}
.tab_scrollor {
  width: 100%;
  height: calc(100% - 25% - 11% - 8vh - 45px);
  overflow: auto;
  p {
    font-size: 17px;
    width: 90%;
    margin-left: 5%;
    font-weight: bold;
    height: 5vh;
    line-height: 5vh;
    color: #fff;
  }
}
.buttom_bar{
  width: 100%;
  height: 8vh;
  position: fixed;
  bottom: 0px;
  font-size: 16px;
  text-align: center;
  line-height: 8vh;
  span:nth-child(1){
    width: 100%;
    height: 100%;
    display: inline-block;
    float: left;
    color: #ffffff;
    background-color: rgba(39,96,258,.9);;
    box-shadow: 0px 0px 4px 0px
      rgba(144, 144, 144, 0.61);
    opacity: 0.9;
  }
  span:nth-child(2){
    width: 40%;
    height: 100%;
    display: inline-block;
    color: #ffffff;
    background-color: rgba(21, 70, 132, 0.9);
	  opacity: 0.9;
  }

}
.bt_investigation {
  width: 46px;
  height: 46px;
  border-radius: 23px;
  background: #178b50;
  position: fixed;
  right: 10%;
  bottom: 10%;
  text-align: center;
  span {
    color: white;
    font-size: 13px;
    padding-left: 8px;
    padding-top: 3px;
    display: block;
    width: 35px;
  }
}
</style>
<style>
.head_swiper .vux-slider .vux-indicator-right>a>.vux-icon-dot.active, .head_swiper .vux-slider>.vux-indicator>a>.vux-icon-dot.active{
  background-color: #2d7bf7;
}
.head_swiper .vux-slider>.vux-swiper>.vux-swiper-item>a>.vux-swiper-desc{
  height: 45px !important;
  background: rgba(0, 0, 0, .3)
}
.tab_content .vux-tab .vux-tab-item{
  background: linear-gradient(180deg,rgba(255, 255, 255, .5),#e5e5e5,hsla(0,0%,90%,0)) 0 100% no-repeat;
  background-size: 100% 1px;
}
</style>
